import { Flex, Form, Input, Select } from "antd";

const options = [
	{ title: "innerText", text: "获取元素的文本内容" },
	{ title: "innerHTML", text: "获取元素的HTML内容" },
	{ title: "outerHTML", text: "获取元素的HTML内容，包括元素本身" },
];
export default function ({ name }: { name: string }) {
	const form = Form.useFormInstance();
	const attribute = Form.useWatch([name, "attribute"]);

	const handleChange = (value: string) => {
		form.setFieldValue([name, "attribute"], value);
	};

	return (
		<Flex vertical gap={10}>
			<Form.Item name={[name, "attribute"]} noStyle>
				<Select allowClear placeholder="请选择" options={options.map((item) => ({ value: item.title, label: item.title }))} />
			</Form.Item>
			{options.map((item, index) => {
				return <ItemText key={index} onClick={() => handleChange(item.title)} active={attribute === item.title} title={item.title} text={item.text} />;
			})}
		</Flex>
	);
}

function ItemText({ onClick, title, text, active }: { onClick?: () => void; active?: boolean; title?: string; text?: string }) {
	return (
		<div style={{ backgroundColor: "#f0f0f0", borderRadius: 5, padding: 10 }}>
			<p style={{ margin: 0, padding: 0, cursor: "pointer", fontWeight: 700, fontSize: 14, marginBottom: 10 }} onClick={onClick}>
				{active ? <span style={{ color: "#1677ff" }}>✓ {title}</span> : <span>{title}</span>}
			</p>
			<Input.TextArea autoSize={{ minRows: 2, maxRows: 5 }} readOnly value={text} />
		</div>
	);
}
